<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
#demo {
font-family: 'Helvetica', Arial, sans-serif;
}
a {
text-decoration: none;
color: #f66;
}
li {
line-height: 1.5em;
margin-bottom: 20px;
}
.author, .date {
font-weight: bold;
}
</style>
</head>
<body>
<div id="demo">
<h1>最新的Vue 提交</h1>
<template v-for="branch in branches">
<input type="radio" name="branch" :id="branch" :value="branch" v-model="currentBranch">
<label :for="branch">{{ branch }}</label>
</template>
<p>Vuejs/vue@{{currentBranch}}</p>
<ul>
<li v-for="record in commits">
<a :href="record.html_url" target="_blank" class="commit">{{ record.sha.slice(0,7) }}</a>
-<span class="message">{{record.commit.message}}</span>
by<span class="author">{{record.commit.author.name}}</span>
at<span class="date">{{record.commit.author.date | formatDate}}</span>
</li>
</ul>
</div>
<script src="http://cdn.bootcss.com/vue/1.0.25/vue.min.js"></script>
<script>
var apiURL = 'https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha=';
var demo = new Vue({
el:'#demo',
data:{
branches:['master','dev'],
currentBranch:'master',
commits:null
},
created:function() {
this.fetchData()
},
methods:{
fetchData:function() {
//初始化ajax请求对象,它是浏览器具有主动请求数据的核心对象
var xhr = new XMLHttpRequest();
var self = this;
//开始请求,get 是方法 url铭文请求方式
//post 表单请求 加密方式
//open 方法两个参数 请求方式，请示地址
xhr.open('GET',apiURL + self.currentBranch);//打开通道 1
//获取数据后的回调
//onload 即请求完成后
xhr.onload = function() {
//xhr在请求完成后 返回的数据会在responseText 属性中 这个属性是个字符串对象
//JSON.parse 将字符串，变成JSON 对象
//stringify()
self.commits = JSON.parse(xhr.responseText);
}//3 异步执行的
xhr.send();//发送请求 请求发送成功进行回调函数 2
}
},
filters:{
formatDate:function(v) {
//replace 字符串替换方法
//第一个参数可以是一个字符串 或者一个正则
//T|Z 这两个字母，全局替换为空格
return v.replace(/T|Z/g,' ');
}
},
watch: {
currentBranch:'fetchData'
}
})
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。